<template>
    <!--论文规范-->
    <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="论文规范" name="first">
                    <!--<el-col>-->
                        <!--修改了毕业论文页面渲染有问题的bug把(v-loading.body)替换为(highlight-current-row v-loading)
                          把没必要的代码，给他删除了。比如请求成功之后信息的提示。(郭伟修改,8.8)-->
                        <el-table :data="tableData" highlight-current-row v-loading="listLoading" border style="width: 100%">
                            <el-table-column fixed prop="layoutId" label="论文规范编号">
                            </el-table-column>
                            <el-table-column prop="layoutName" label="标题">
                            </el-table-column>
                            <el-table-column prop="layoutUpdateStr" label="上传日期">
                            </el-table-column>
                            <el-table-column fixed="right" prop="layoutContent" label="操作">
                                <template scope="scope">
                                    <el-button @click="download(scope.$index, scope.row)" type="text" size="small">下载
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                    <!--分页 <论文规范分页>-->
                    <el-col>
                        <el-pagination style="float: right; margin: 12px 10px;"
                                       @size-change="handleSizeChange"
                                       @current-change="handleCurrentChange"
                                       :current-page="currentPage"
                                       :page-sizes="[10, 15, 20, 25]"
                                       :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                                       :total="total">
                        </el-pagination>
                    </el-col>
                </el-tab-pane>

                <el-tab-pane label="学生论文" name="second">
                    <el-row>
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <el-button type="primary" icon="serch" @click="handleEdit" style="float:left;">上传论文</el-button>
                            </div>
                        </el-col>
                    </el-row>

                    <!--增加上传论文界面  修改郭伟8.17-->
                    <el-dialog title="上传论文" v-model="editFormVisible" :close-on-click-modal="false">
                        <el-form  label-width="100px"  ref="editForm">
                            <el-form-item>
                                <my-upload buttonName="请选择上传的论文" @selectedFile="selectedFile"></my-upload>
                                <el-tag :type="file.type">{{file.fileName}}</el-tag>
                            </el-form-item>
                        </el-form>

                        <div slot="footer" class="dialog-footer">
                            <el-button @click.native="editFormVisible = false">取消</el-button>
                            <el-button type="primary" @click.native="editSubmit">保存</el-button>
                        </div>
                    </el-dialog>


                    <el-col>
                        <el-col>
                            <el-table :data="tableData1" highlight-current-row v-loading="listLoading1" border style="width: 100%">
                                <el-table-column fixed prop="thesisId" label="论文编号">
                                </el-table-column>
                                <el-table-column prop="thesisTitle" label="论文题目" >
                                </el-table-column>
                                <el-table-column prop="thesisScore" label="论文成绩" >
                                </el-table-column>
                                <el-table-column prop="thesisStateStr" label="审核状态">
                                </el-table-column>
                                <el-table-column prop="thesisDateStr" label="提交日期" >
                                </el-table-column>
                                <el-table-column fixed="right" prop="thesisAddress" label="操作" >
                                    <template scope="scope">
                                        <el-button @click="downTeis(scope.row)" type="text" size="small">
                                            下载
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>

                        <!--分页 学生论文规范-->
                        <el-col>
                            <el-pagination style="float: right; margin: 12px 10px;"
                                           @size-change="handleSizeChange"
                                           @current-change="handleCurrentChange"
                                           :current-page="currentPage1"
                                           :page-sizes="[10, 15, 20, 25]"
                                           :page-size="pageSize1"
                                           layout="total, sizes, prev, pager, next, jumper"
                                           :total="total1">
                            </el-pagination>
                        </el-col>
                    </el-col>
                </el-tab-pane>
            </el-tabs>
        <!--</el-col>-->
    </div>
</template>

<script>
    import {listThesisLayout, listThesis, saveThesis, download, downStudentThesis} from '../../api/api'
    import myUpload from '../public/myUpload.vue';
    export default {
        components: {myUpload},
        data() {
            return {
                activeName: 'first',    //Tab当前页
                editFormVisible:false,//是否显示页面
                dialogVisible: false,
                dialogVisible1: false,    //弹出层
                total: 0,
                total1: 0,    //总数据条数
                pageSize: 10,
                pageSize1: 10,    //每页数据条数
                currentPage: 1,
                currentPage1: 1,    //当前页
                listLoading: false,
                listLoading1: false,    //加载器
                tableData: [],
                tableData1: []    //表格
            }
        },
        methods: {
            // 获取论文规范
            getLayout() {
                this.listLoading = true;
                let para = {
                    pageNo: this.currentPage,    //当前页
                    pageSize: this.pageSize    //每页记录数
                };

                listThesisLayout(para).then((res) => {
                    this.listLoading = false;
                    //后台数据
                    this.tableData = res.resData.list;
                    this.total = res.resData.total;
                    this.pageSize = res.resData.pageSize;

                });
            },

            // 获取学生论文
            getThesis() {
                this.listLoading1 = true;
                let para = {
                    pageNo: this.currentPage1,    //当前页
                    pageSize: this.pageSize1    //每页记录数
                };

                listThesis(para).then((res) => {
                    this.listLoading1 = false;
                    //后台数据
                    this.total1 = res.resData.total;
                    this.pageSize1 = res.resData.pageSize;
                    this.tableData1 = res.resData.list;
                });
            },



            file: {
                type: '',
                fileName: '',
                fileData: ''
            },

            /**
             * 选取的文件 参数为文件句柄
             */
            selectedFile(file){
                this.file.fileName = file.name;
                this.file.type = "success";
                this.file.fileData = file;
                console.log(file);
            },

            //显示上传论文页面
            handleEdit:function () {
                this.editFormVisible=true;
    },
            //论文提交
            editSubmit:function () {
                if(this.file.fileData!=""){
                    this.$confirm('确认提交吗','提示',{}).then(()=>{
                        this.loading=true;
                        let para = new FormData();
                        para.append("file",this.file.fileData);

                        saveThesis(para).then((res)=>{
                            this.editLoading=false;
                            let {resCode}=res;
                            if(resCode!=0){
                                this.$message({
                                    message: '失败',
                                    type: 'error'
                                });
                            }else{
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                            }
                            this.editFormVisible=false;
                            this.$refs['editForm'].resetFields();
                            this.getThesis();
                        });

                        }

                    );
                }

            },



            saveThesis() {
                saveThesis(para).then((res) => {
                    this.dialogVisible = false;
                    if(res.resCode!=0){
                        this.$message({
                            message: '保存失败',
                            type: 'error'
                        });
                    }else {
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                    }

                });
            },


            // 学生论文下载
            downTeis(row) {
                downStudentThesis(row.thesisTitle,row.thesisAddress);
            },

            // 分页
            handleSizeChange(val) {
                if (this.activeName == 'first') {
                    this.pageSize = val;
                    console.log(`每页 ${val} 条`);
                    // 调用获取论文规范
                    this.getLayout();
                }
                if (this.activeName == 'second') {
                    this.pageSize1 = val;
                    console.log(`每页 ${val} 条`);
                    // 调用获取论文
                    this.getThesis();
                }
            },
            handleCurrentChange(val) {
                if (this.activeName == 'first') {
                    this.currentPage = val;
                    console.log(`当前页: ${val}`);
                    // 调用获取论文规范
                    this.getLayout();
                }
                if (this.activeName == 'second') {
                    this.currentPage1 = val;
                    console.log(`每页 ${val} 条`);
                    // 调用获取论文
                    this.getThesis();
                }
            },



            // Tabs 标签页组件
            handleClick(tab, event) {
//            console.log(event);
                if (this.activeName == 'first') {
                    this.getLayout();
                }
                if (this.activeName == 'second') {
                    this.getThesis();
                }
            }
        },
        mounted() {
            this.getLayout();
            this.getThesis();
        }
    }
</script>